.body {
	height: 90%;
	width: 90%;
	align-self: center;
	margin: auto 4% auto 5%;
	.deck_list {
		display: flex;
		gap: 10px;
		position: relative;
		width: 100%;
		height: 100%;
		.list {
			width: 40%;
			display: flex;
			flex-direction: column;
			gap: 10px;
			.button_list {
				display: flex;
				height: 30px;
				gap: 10px;
			}
			.var-list {
				height: calc(100% - 30px);
				width: 80%;
				display: flex;
				flex-direction: column;
				gap: 10px;
				overflow-y: auto;
				text-overflow: ellipsis;
				white-space: nowrap;
				&::-webkit-scrollbar {
					display: none;
				}
				.var-button {
					overflow: hidden;
				}
			}
		}
		.deck_show {
			width: 60%;
			height: 100%;
			overflow: hidden;
			mask: radial-gradient(circle, white 0%, white 20%, transparent 100%);
			-webkit-mask: radial-gradient(circle, white 0%, white 20%, transparent 100%);
			.deck {
				display: grid;
				justify-items: center;
				height: 100%;
				width: 100%;
				.cards {
					width: 100%;
					.card {
						width: calc(100% / 15);
						aspect-ratio: 1 / 1.45;
						display: inline-block;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.deck_name {
						span {
							color: white;
							font-size: 10vh;
							white-space: nowrap;
						}
					}
				}
			}
		}
		.deck_button {
			position: absolute;
			display: flex;
			flex-direction: row-reverse;
			gap: 10px;
			right: 20px;
			bottom: 20px;
		}
	}
}

.var-popup {
	.var-form {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 25vw;
		height: 90%;
		overflow-y: auto;
		.var-select, .var-input {
			width: 100%;
		}
		&::-webkit-scrollbar {
			display: none;
		}
	}
}